<template>
  <view
    v-if="show"
    class="tn-empty"
    :class="[emptyClass]"
    :style="emptyStyle"
  >
    <!-- 图标或者图片 -->
    <view class="tn-empty__icon" :class="[emptyIconClass]" :style="emptyIconStyle">
      <tn-icon :icon="iconValue" :size="isImg ? iconSize || '160rpx' : ''"></tn-icon>
    </view>

    <!-- 提示文字 -->
    <view class="tn-empty__text" :class="[emptyTextClass]" :style="emptyTextStyle">
      {{ textContent }}
    </view>
    <!-- 自定义内容 -->
    <slot></slot>
  </view>
</template>

<script lang="ts" setup>
import { emptyProps, EmptyMode } from '../../../types/tn-empty'
import { emptyDefaultModeInfo } from '../lib/defaultMode'
import { ColorInfo } from '../../../types/tuniao-ui'
import { computed, CSSProperties } from 'vue'
import useComponentColor from '../../../libs/hooks/useComponentColor'
import { handleValueWithUnit } from '../../../utils'
import TnIcon from '../../tn-icon/src/Icon.vue'

const props = defineProps(emptyProps)

const { splitColorInfo } = useComponentColor()
// 解析图标颜色
const iconColor = computed<ColorInfo>(() => {
  return splitColorInfo('color', props?.iconColor || '')
})
// 解析文字颜色
const textColor = computed<ColorInfo>(() => {
  return splitColorInfo('color', props?.textColor || '')
})

// empty容器样式
const emptyStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}

  return Object.assign(style, props?.customStyle || {})
})
// emptyIcon样式
const emptyIconStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (iconColor.value.type === 'style') style.color = iconColor.value.value
  if (isImg.value) {
    style.width = props?.iconSize ? handleValueWithUnit(props.iconSize) : '160rpx'
    style.height = style.width
  } else {
    style.fontSize = props?.iconSize ? handleValueWithUnit(props.iconSize) : '90rpx'
  }
  return style
})
// emptyText样式
const emptyTextStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}
  if (textColor.value.type === 'style') style.color = textColor.value.value
  if(props?.textSize) style.fontSize = handleValueWithUnit(props.textSize)
  return style
})

// empty容器对应的类
const emptyClass = computed<string>(() => {
  let clazz: string[] = []
  if (props?.type) clazz.push(`tn-type-${props.type}--font`)
  return clazz.join(' ')
})
// empty图标对应的类
const emptyIconClass = computed<string>(() => {
  let clazz: string[] = []
  if (iconColor.value.type === 'class') clazz.push(iconColor.value.value)
  return clazz.join(' ')
})
// empty文本对应的类
const emptyTextClass = computed<string>(() => {
  let clazz: string[] = []
  if (textColor.value.type === 'class') clazz.push(textColor.value.value)
  return clazz.join(' ')
})

// 判断是否为图片
const isImg = computed<boolean>(()=> {
  return props?.icon?.indexOf('/') !== -1
})

// 当前提示的图标/图片
const iconValue = computed<string>(() => {
  if (props?.icon) return props.icon
  return `empty-${props.mode}`
})
// 当前提示文字
const textContent = computed<string>(() => {
  if (props?.text) {
    return props.text
  }
  return emptyDefaultModeInfo[(props.mode as EmptyMode)] || ''
})
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>

.tn-empty {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #AAAAAA;

  &__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}
</style>
